<template>
  <div id="trainingClassDetail">
    <div v-if="dataLoading">数据加载中...</div>
    <table cellspacing="0" cellpadding="0" class="mytable" v-else>
      <tr>
        <th width="100px">班次名称</th>
        <td width="400px">{{data.className}}</td>
        <th width="100px">举办单位</th>
        <td width="400px">{{data.trainUnit}}</td>
      </tr>
      <tr>
        <th>培训内容</th>
        <td>{{data.content}}</td>
        <th>条件</th>
        <td>{{data.cond}}</td>
      </tr>
      <tr>
        <th>班次时间</th>
        <td>{{data.startDate}} 至 {{data.endDate}}</td>
        <th>时长</th>
        <td>{{data.duration}} 天</td>
      </tr>
      <tr>
        <th>参训地点</th>
        <td>{{data.place}}</td>
        <th>涉及处室</th>
        <td>
          <template v-if="data.departments&&data.departments.length>0">
            <template v-for="(item,index) in data.departments.split(',')">
              <el-tag :key="'departments_'+index" v-if="item==='1'">干部一处</el-tag>
              <el-tag :key="'departments_'+index" v-if="item==='2'">干部二处</el-tag>
              <el-tag :key="'departments_'+index" v-if="item==='3'">干部三处</el-tag>
            </template>
          </template>
        </td>
      </tr>
      <tr>
        <th>培训人数</th>
        <td>{{data.personNumber}}</td>
        <th>备注</th>
        <td>{{data.remarks}}</td>
      </tr>
      <tr v-if="showPerson">
        <th>参训人员</th>
        <td colspan="3">
          <el-table :data="personList" class="el-table" style="width:100%">
            <el-table-column width="140" property="jobDate" label="类型" align="center">
              <template slot-scope="scope">
                <el-tooltip
                  v-if="scope.row.type===1&&!scope.row.participation"
                  placement="top"
                  :content="'未参训，原因：'+scope.row.reason"
                  >
                  <el-tag type="warning" effect="dark"><b>{{scope.row.typename}}</b></el-tag>
                </el-tooltip>
                <el-tag v-if="scope.row.type===1&&scope.row.participation" type="'success'" effect="dark"><b>{{scope.row.typename}}</b></el-tag>
                <el-tag v-if="scope.row.type===2" type="info" effect="dark"><b>{{scope.row.typename}}</b></el-tag>
              </template>
            </el-table-column>
            <el-table-column width="120" property="name" label="姓名" align="center" />
            <el-table-column width="80" property="age" label="年龄" align="center" />
            <el-table-column min-width="150" property="unit" label="单位" />
            <el-table-column width="270" property="job" label="职务" />
            <el-table-column width="100" property="level" label="级别" align="center" />
            <el-table-column width="110" property="partyMember" label="是否党员" align="center">
              <template slot-scope="scope">
                {{scope.row.partyMember?'是':'否'}}
              </template>
            </el-table-column>
            <el-table-column width="200" property="jobDate" label="任相当层次职务职级时间" align="center">
              <template slot-scope="scope">
                {{formatJobDate(scope.row.jobDate)}}
              </template>
            </el-table-column>
            <el-table-column width="200" property="remarks" label="备注"></el-table-column>
          </el-table>
        </td>
      </tr>
      <tr>
        <th>附件</th>
        <td colspan="3">
          <div v-for="(item,index) in files" :key="index">
            <a :href="$http.defaults.baseURL+$http.defaults.trainingAPI+'api/trainingGenFileInfo/download?id='+item.id">{{item.parentName?item.parentName+'('+item.fileName+')':item.fileName}}{{item.fileType?'.'+item.fileType:''}}</a>
          </div>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  watch: {
    id: {
      handler (val) {
        this.getClassDetail()
      },
      immediate: true
    },
    timestamp: {
      handler (val) {
        this.getClassDetail()
      },
      immediate: true
    }
  },
  props: {
    id: null,
    showPerson: false,
    timestamp: null
  },
  data () {
    return {
      files: [],
      dataLoading: false,
      data: {},
      personList: []
    }
  },
  methods: {
    formatJobDate (str) {
      if (str) {
        if (str.length === 6 && /^[0-9]*$/.test(str)) { // yyyymm
          return str.substr(0, 4) + '.' + str.substr(4)
        }
        if (str.length === 8 && /^[0-9]*$/.test(str)) { // yyyymmdd
          return str.substr(0, 4) + '.' + str.substr(4, 2) + '.' + str.substr(6, 2)
        } else {
          return str
        }
      }
    },
    getClassDetail () {
      this.dataLoading = true
      this.$http
        .get(this.$http.defaults.trainingAPI + `api/trainingBusClass/getById?id=` + this.id)
        .then(response => {
          this.dataLoading = false
          if (response.data.success === true) {
            this.data = response.data.result
            this.files = response.data.result.files.map(item => { return {subNames: item.subNames, fileName: item.fileName, parentName: item.parentName, fileType: item.fileType, id: item.id} })
            if (this.showPerson) {
              this.getPersonList()
            }
          } else {
            console.log('获取失败:' + response.data.message)
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch((error) => {
          this.dataLoading = false
          console.log(error)
          this.$message({
            message: '获取失败:' + error,
            type: 'error'
          })
        })
    },
    getPersonList () {
      this.dataLoading = true
      this.$http
        .get(this.$http.defaults.trainingAPI + `api/trainingBusClass/getOfficialCandidateList?classId=` + this.id)
        .then(response => {
          this.dataLoading = false
          if (response.data.success === true) {
            this.personList = response.data.result
            let type1index = 1
            let type2index = 1
            this.personList.forEach((item, index, arr) => {
              console.log(item)
              switch (item.type) {
                case 1:
                  arr[index].theType = item.participation ? 'success' : 'warning'
                  arr[index].typename = '参训人员' + type1index
                  type1index++
                  break
                case 2:
                  arr[index].theType = 'info'
                  arr[index].typename = '备选人员' + type2index
                  type2index++
                  break
              }
            })
          } else {
            console.log('获取失败:' + response.data.message)
            this.$message({
              message: '获取失败:' + response.data.message,
              type: 'error'
            })
          }
        })
        .catch((error) => {
          this.dataLoading = false
          console.log(error)
          this.$message({
            message: '获取失败:' + error,
            type: 'error'
          })
        })
    }
  }
}
</script>
<style>
  #trainingClassDetail .mytable{
    border-top: 1px solid #74A6CC;
    border-left: 1px solid #74A6CC;
    margin: 10px;
    width: calc(100% - 20px);
    font-size:var(--size14) !important;
    font-family: '宋体'
  }
  #trainingClassDetail .mytable th,
  #trainingClassDetail .mytable td{
    height: auto;
    padding: 10px;
    border-right: 1px solid #74A6CC;
    border-bottom: 1px solid #74A6CC;
    vertical-align:top;
    line-height: 150%;
  }
  #trainingClassDetail .mytable th{
    background:#C0DCF1;
    width:150px;
    vertical-align: middle;
  }
</style>
